<script setup lang='ts'>
  import { onMounted, provide, reactive, ref } from 'vue'
  import { controlStore } from '@/pinia/modules/controller';
  const useControlStore = controlStore()
  import { imgonLoad } from '@/hook/imgload';
  import { xmloading, getAssetsFile } from '@/utils/public';
  import xmimg from '@/components/xmimg.vue';
  import headBox from './components/headBox.vue';
  import LotteryList from './components/LotteryList.vue';
  import moreBox from './components/moreBox.vue';
  import ruleFont from './components/ruleFont.vue';
  import outcomeDialog from './components/outcomeDialog.vue';
  import confirm from './components/confirm.vue'
  import tipsDialog from './components/tipsDialog.vue';
  import { timekeepingTime, webType } from '@/pinia/getter'
  const ticketBox = ref(),
  confirmRef = ref(),
  mainRef = ref()
  const action = reactive({
    show:false,
    ruleShow:false,
    tipsShow:false
  })
  const listChange = (type:any)=>{
    // 首次押注
    console.log('type', type);
    if(type == 1 && !action.tipsShow) {
      action.tipsShow = true
    }
    // 钻石不足
    if(type == 2) {
      confirmRef.value.openDialog({
        showtype:2
      })
    }
  }
  const handleRule = ()=>{
    action.ruleShow = true
  }
  const closeclosed = ()=>{
    action.show = false;
    setTimeout(() => {
      try{
        if(webType.value == 'innerWeb') {
          (kk as any).closeH5();
        }else if(webType.value == 'iframe') {
          window.parent.postMessage({
            handle:'closeChange'
          });
        }else {
          (kk as any).closeH5All();
        }
      }catch(val){
        console.log('关闭错误', val);
      }
    }, 500);
  };
  onMounted(()=>{
    useControlStore.ticketBox = ticketBox.value
  })
  provide('onLoadFunName','homeimgLoad')
  const loading = xmloading()
  imgonLoad('homeimgLoad',()=>{
    loading.close()
    action.show = true
  })
  
</script>

<template>
  <div class="main-content">
    <van-popup 
    class="main-popup"
    :lazy-render="false"
    position="bottom"
    @closed="closeclosed"
    v-model:show="action.show">
    <div class="titleBox">
      <div
        :class="['countdown flex', timekeepingTime < 4?'colorFFF':'']"
        :style="{
          '---opacity':timekeepingTime>0?1:0
        }"
      >
        <img :src="getAssetsFile('icon8.png')" class="iconImg">
        <span>{{ timekeepingTime }}s</span>
      </div>
      <!-- <xmimg @click="action.show = false" :src="getAssetsFile('titleimg1.png')" class="titleImg" /> -->
      <div @click="handleRule" class="ruleBut">规则</div>
    </div>
    <div class="content">
      <headBox />
      <div ref="mainRef" class="mian">
        <LotteryList @change="listChange" />
        <div ref="ticketBox" class="ticketBox"></div>
        <moreBox />
      </div>
    </div>
    </van-popup>
    <ruleFont v-model:dialogshow="action.ruleShow" />
    <outcomeDialog />
    <confirm ref="confirmRef" />
    <tipsDialog v-model:dialogshow="action.tipsShow" page="handletips" />
  </div>
</template>

<style lang='scss' scoped>
  .main-content {
    width: 100vw;
    height: 100vh;
    :deep(.main-popup) {
      overflow: hidden;
      max-height: 95vh !important;
      display: flex;
      flex-direction: column;
    }
    :deep(.main-popup)::-webkit-scrollbar {
      display: none;
    }
  }
  .titleBox {
    position: relative;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 95px;
    .countdown, .titleImg, .ruleBut {
      position: absolute;
      bottom: 0;
      transform: translateY(100%) translateY(-6px);
    }
    
    .countdown {
      opacity: var(---opacity);
      left: 0;
      width: 66px;
      height: 22px;
      padding: 3px 0 0 8px;
      box-sizing: border-box;
      background: url('@/assets/images/backimg1.png') left top / 100% 100% no-repeat;
      transition: .28s opacity;
      .iconImg {
        width: 16px;
        height: 16px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        line-height: 16px;
        margin: 0 0 0 4px;
      }
    }
    .colorFFF {
      span {
        color: #fff;
        animation:colorAnimation .4s linear infinite alternate ;

      }
      @keyframes colorAnimation
      {
        0% {
          color: #973C00;
        }
        100% {
          color: #fff;
        }
      }
    }
    // .titleImg {
    //   width: 222px;
    //   height: 95px;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   bottom: -9px;
    // }
    .ruleBut {
      right: 0;
      width: 44px;
      height: 22px;
      line-height: 22px;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      padding: 0 0 0 12px;
      box-sizing: border-box;
      background: url($href+'backimg2.png') left top / 100% 100% no-repeat;
    }
  }
  .content {
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    .mian {
      flex: 1;
      // overflow-x: hidden;
      overflow: hidden;
      position: relative;
      padding-bottom: 34px;
      background: #13134A;
      display: flex;
      flex-direction: column;
      .LotteryList {
        flex: 1;
      // overflow-x: hidden;
        overflow: auto;
      }
    }
    .ticketBox {
      position: absolute;
      right: 50px;
      bottom: 30px;
    }
  }
</style>